<template>
  <div id="app" class="SkSports">
    <!--户外运动-->
    <a-row :gutter="[8, 16]">
      <a-col :sm="12" :xxl="4">
        <a-card title="今日户外运动量" class="center" :bordered="false">
          <div class="data-main" style="height: 400px;">
            <div
              v-for="(item, index) in outList"
              :key="item.id"
              :class="outIndex1 == index ? 'data-active' : ''"
              @click="viewDataOut(index, '1')"
            >
              <a-row class="data-content">
                <a-col class="title" :span="8">
                  {{ item.className }}
                </a-col>
                <a-col class="measure right" :span="16">
                  {{ item.totalAmount }}
                </a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="12" :xxl="11">
        <a-card :bordered="false">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title">
              <span class="bg">今日户外运动数据-{{ selectOutClass1 }}</span>
            </div>
            <div class="ant-card-extra">
              <a slot="extra" @click="handleCount('week', '1')">查看详情<a-icon type="caret-right"/></a>
            </div>
          </div>
          <p class="subtitle" style="margin-bottom: 14px;">数据时间：{{ currentTime }}</p>
          <div ref="lineBarOut" :style="{ width: '100%', height: '368px' }"></div>
        </a-card>
      </a-col>
      <a-col :sm="24" :xxl="9">
        <a-card :bordered="false">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title"></div>
            <div class="ant-card-extra">
              <a slot="extra" @click="handleCount('month', '1')">查看本月<a-icon type="caret-right"/></a>
            </div>
          </div>
          <a-table :columns="columns['out']" :data-source="outTablelist1" :pagination="false" :scroll="{ y: 348 }">
          </a-table>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="[8, 16]">
      <a-col :sm="12" :xxl="4">
        <a-card title="今日户外时长" class="center" :bordered="false">
          <div class="data-main" style="height: 400px;">
            <div
              v-for="(item, index) in outList"
              :key="item.id"
              :class="outIndex2 == index ? 'data-active' : ''"
              @click="viewDataOut(index, '2')"
            >
              <a-row class="data-content">
                <a-col class="title" :span="8">
                  {{ item.className }}
                </a-col>
                <a-col class="measure right" :span="16"> {{ item.totalDuration }}分钟 </a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="12" :xxl="11">
        <a-card :bordered="false">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title">
              <span class="bg">户外运动时长-{{ selectOutClass2 }}</span>
            </div>
            <div class="ant-card-extra">
              <a slot="extra" @click="handleTime('week', '1')">查看详情<a-icon type="caret-right"/></a>
            </div>
          </div>
          <p class="subtitle" style="margin-bottom: 14px;">数据时间：{{ currentTime }}</p>
          <div ref="lineChartOut" :style="{ width: '100%', height: '368px' }"></div>
        </a-card>
      </a-col>
      <a-col :sm="24" :xxl="9">
        <a-card :bordered="false">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title"></div>
            <div class="ant-card-extra">
              <a slot="extra" @click="handleTime('month', '1')">查看本月<a-icon type="caret-right"/></a>
            </div>
          </div>
          <a-table :columns="columns['outTime']" :data-source="outTablelist2" :pagination="false" :scroll="{ y: 348 }">
          </a-table>
        </a-card>
      </a-col>
    </a-row>
    <!--室内运动-->
    <a-row :gutter="[8, 16]">
      <a-col :sm="12" :xxl="4">
        <a-card title="今日室内运动量" class="center" :bordered="false">
          <div class="data-main" style="height: 400px;">
            <div
              v-for="(item, index) in innerList"
              :key="item.id"
              :class="innerIndex1 == index ? 'data-active' : ''"
              @click="viewDataIn(index, '1')"
            >
              <a-row class="data-content">
                <a-col class="title" :span="8">
                  {{ item.className }}
                </a-col>
                <a-col class="measure right" :span="16">
                  {{ item.totalAmount }}
                </a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="12" :xxl="11">
        <a-card :bordered="false">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title">
              <span class="bg">今日室内运动数据-{{ selectInnerClass1 }}</span>
            </div>
            <div class="ant-card-extra">
              <a slot="extra" @click="handleCount('week', '0')">查看详情<a-icon type="caret-right"/></a>
            </div>
          </div>
          <p class="subtitle" style="margin-bottom: 14px;">数据时间：{{ currentTime }}</p>
          <div ref="lineBarInner" :style="{ width: '100%', height: '368px' }"></div>
          <!-- <doubleLineChart :width="'100%'" :height="'368px'" :chartData="chartData"></doubleLineChart> -->
        </a-card>
      </a-col>
      <a-col :sm="24" :xxl="9">
        <a-card :bordered="false">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title"></div>
            <div class="ant-card-extra">
              <a slot="extra" @click="handleCount('month', '0')">查看本月<a-icon type="caret-right"/></a>
            </div>
          </div>
          <a-table :columns="columns['in']" :data-source="innerTablelist1" :pagination="false" :scroll="{ y: 348 }">
          </a-table>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="[8, 16]">
      <a-col :sm="12" :xxl="4">
        <a-card title="今日室内运动时长" class="center" :bordered="false">
          <div class="data-main" style="height: 400px;">
            <div
              v-for="(item, index) in innerList"
              :key="item.id"
              :class="innerIndex2 == index ? 'data-active' : ''"
              @click="viewDataIn(index, '2')"
            >
              <a-row class="data-content">
                <a-col class="title" :span="8">
                  {{ item.className }}
                </a-col>
                <a-col class="measure right" :span="16"> {{ item.totalDuration }}分钟 </a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="12" :xxl="11">
        <a-card :bordered="false">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title">
              <span class="bg">室内运动时长-{{ selectInnerClass2 }}</span>
            </div>
            <div class="ant-card-extra">
              <a slot="extra" @click="handleTime('week', '0')">查看详情<a-icon type="caret-right"/></a>
            </div>
          </div>
          <p class="subtitle" style="margin-bottom: 14px;">数据时间：{{ currentTime }}</p>
          <div ref="lineChartInner" :style="{ width: '100%', height: '368px' }"></div>
        </a-card>
      </a-col>
      <a-col :sm="24" :xxl="9">
        <a-card :bordered="false">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title"></div>
            <div class="ant-card-extra">
              <a slot="extra" @click="handleTime('month', '0')">查看本月<a-icon type="caret-right"/></a>
            </div>
          </div>
          <a-table :columns="columns['inTime']" :data-source="innerTablelist2" :pagination="false" :scroll="{ y: 348 }">
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import '@/assets/less/ClassAndCard.less'
import doubleLineChart from '@/components/Echarts/doubleLine.vue'
import { getAction } from '@/api/manage'
import { skClassList } from '@/api/management.js'
import { filterMultiDictText, filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'SkSports',
  components: {
    doubleLineChart
  },
  data() {
    return {
      url: {
        list: 'health/skSportRecord/getSprotStatistical'
      },
      cusHeight: '430px',
      bodyStyle: {
        padding: '5px 15px'
      },
      color: ['#fe9a', '#fe9a8b'],
      currentTime: '',
      innerIndex1: 0,
      innerIndex2: 0,
      outIndex1: 0,
      outIndex2: 0,
      selectInnerClass1: '全园',
      selectInnerClass2: '全园',
      selectOutClass1: '全园',
      selectOutClass2: '全园',
      innerTablelist1: [],
      innerTablelist2: [],
      outTablelist1: [],
      outTablelist2: [],
      outList: [],
      outWeekChartList: [],
      outWeekList: [],
      outClassWeekList: [],
      innerList: [],
      innerWeekChartList: [],
      innerWeekList: [],
      innerClassWeekList: [],
      classList: [],
      columns: {
        out: [],
        outTime: [],
        in: [],
        inTime: []
      },
      columns1: [
        {
          title: '年级',
          dataIndex: 'classType',
          key: 'classType',
          filters: [
            {
              text: '小班',
              value: '小班'
            },
            {
              text: '中班',
              value: '中班'
            },
            {
              text: '大班',
              value: '大班'
            }
          ],
          onFilter: (value, record) => record.classType.indexOf(value) === 0
        },
        {
          title: '班级',
          dataIndex: 'className',
          key: 'className'
        },
        {
          title: '运动量',
          dataIndex: 'totalAmount',
          key: 'totalAmount',
          // defaultSortOrder: 'descend',
          sorter: (a, b) => a.totalAmount - b.totalAmount,
          customRender: function(text) {
            return text==undefined? '0' : text + ''
          }
        },
        {
          title: '运动步数',
          dataIndex: 'totalStepNumber',
          key: 'totalStepNumber',
          sorter: (a, b) => a.totalStepNumber - b.totalStepNumber,
          customRender: function(text) {
            return text==undefined? '0步' : text + '步'
          }
        }
      ],
      columns1Class: [
        {
          title: '年级',
          dataIndex: 'classType',
          key: 'classType',
          filters: [
            {
              text: '小班',
              value: '小班'
            },
            {
              text: '中班',
              value: '中班'
            },
            {
              text: '大班',
              value: '大班'
            }
          ],
          onFilter: (value, record) => record.classType.indexOf(value) === 0
        },
        {
          title: '班级',
          dataIndex: 'className',
          key: 'className'
        },
        {
          title: '学生',
          dataIndex: 'studentName',
          key: 'studentName'
        },
        {
          title: '运动量',
          dataIndex: 'totalAmount',
          key: 'totalAmount',
          // defaultSortOrder: 'descend',
          sorter: (a, b) => a.totalAmount - b.totalAmount,
          customRender: function(text) {
            return text==undefined? '0' : text + ''
          }
        },
        {
          title: '运动步数',
          dataIndex: 'totalStepNumber',
          key: 'totalStepNumber',
          sorter: (a, b) => a.totalStepNumber - b.totalStepNumber,
          customRender: function(text) {
            return text==undefined? '0步' : text + '步'
          }
        }
      ],
      columns2: [
        {
          title: '年级',
          dataIndex: 'classType',
          key: 'classType',
          filters: [
            {
              text: '小班',
              value: '小班'
            },
            {
              text: '中班',
              value: '中班'
            },
            {
              text: '大班',
              value: '大班'
            }
          ],
          onFilter: (value, record) => record.classType.indexOf(value) === 0
        },
        {
          title: '班级',
          dataIndex: 'className',
          key: 'className'
        },
        {
          title: '运动时长(分钟)',
          dataIndex: 'totalDuration',
          key: 'totalDuration',
          // defaultSortOrder: 'descend',
          sorter: (a, b) => a.totalDuration - b.totalDuration,
          customRender: function(text) {
            return text==undefined? '0分钟' : text + '分钟'
          }
        }
      ],
      columns2Class: [
        {
          title: '年级',
          dataIndex: 'classType',
          key: 'classType',
          filters: [
            {
              text: '小班',
              value: '小班'
            },
            {
              text: '中班',
              value: '中班'
            },
            {
              text: '大班',
              value: '大班'
            }
          ],
          onFilter: (value, record) => record.classType.indexOf(value) === 0
        },
        {
          title: '班级',
          dataIndex: 'className',
          key: 'className'
        },
        {
          title: '学生',
          dataIndex: 'studentName',
          key: 'studentName'
        },
        {
          title: '户外时长(分钟)',
          dataIndex: 'totalDuration',
          key: 'totalDuration',
          // defaultSortOrder: 'descend',
          sorter: (a, b) => a.totalDuration - b.totalDuration,
          customRender: function(text) {
            return text==undefined? '0分钟' : text + '分钟'
          }
        }
      ]
    }
  },

  filters: {},

  computed: {},

  created() {
    this.currentTime = this.$skCommon.getDate(1)
    this.columns['out'] = this.columns1
    this.columns['outTime'] = this.columns2
    this.columns['in'] = this.columns1
    this.columns['inTime'] = this.columns2
  },

  activated() {},

  mounted() {
    // areaType: 0-室内，1-室外，2-专业活动室， 不传的话查询所有类型的区域

    this.getClassList()
  },
  methods: {
    setColumns(key, classId) {
      console.log(key, classId)
      if (key.indexOf('Time') > -1) {
        this.columns[key] = classId != '' ? this.columns2Class : this.columns2
      } else {
        this.columns[key] = classId != '' ? this.columns1Class : this.columns1
      }
      console.log(key, this.columns)
    },
    // 获取所有的班级
    getClassList() {
      this.dataDate = this.$skCommon.getDate(1)
      skClassList()
        .then(res => {
          if (res.success) {
            this.classList = res.result
            this.load('1')
            this.load('0')
          } else {
            this.$message.warning(res.message)
          }
          this.classLoading = false
        })
        .catch(error => {
          console.error(error)
        })
    },
    handleData(result){
      let list = [...this.classList]
      list.forEach((item,index)=>{
        if (typeof item.classType == "number") {
          item.classType = filterDictTextByCache("class_type",item.classType)
        }
        if (result.length > 0) {
          result.forEach(el => {
            if (item.id == el.classId) {
              list.splice(index,1,el)
            }else{
              item.classId = item.id
              item.totalStepNumber = 0
              item.totalAmount = 0
              item.totalDuration = 0
            }
          });
        }else{
          item.classId = item.id
          item.totalStepNumber = 0
          item.totalAmount = 0
          item.totalDuration = 0
        }
      })
      console.log("list",list);
      return list
    },
    //初始化加载数据
    load(areaType) {
      const currentDate = this.$skCommon.getDate(0)
      const nextDate = this.$skCommon.getDate(0)
      // 查询列表数据
      const paramsTotal = {
        statisticalScope: 'class',
        startDate: currentDate,
        endDate: nextDate,
        areaType: areaType ? areaType : undefined
      }
      getAction(this.url.list, paramsTotal).then(res => {
        console.log(res);
        var totleItem = {
          classId: null,
          className: '全园',
          totalStepNumber: 0,
          totalAmount: 0,
          totalDuration: 0
        }
        res.result.forEach(el => {
          totleItem.totalStepNumber += el.totalStepNumber
          totleItem.totalAmount += el.totalAmount
          totleItem.totalDuration += el.totalDuration
        })
        
        if (areaType == '0') {
          let list = this.handleData(res.result)
          this.innerList = [totleItem].concat(list)
          this.innerTablelist1 = this.innerList.filter(item => {
            return item.className != '全园'
          })
          this.innerTablelist2 = this.innerList.filter(item => {
            return item.className != '全园'
          })
        } else {
          let list = this.handleData(res.result)
          console.log('sssssssssssssssssssss',list);
          this.outList = [totleItem].concat(list)
          this.outTablelist1 = this.outList.filter(item => {
            return item.className != '全园'
          })
          this.outTablelist2 = this.outList.filter(item => {
            return item.className != '全园'
          })
          console.log('outlist', this.outList)
        }
      })

      // 查询运动数据
      const paramsWeek = {
        statisticalScope: 'all',
        timeScope: 'week',
        areaType: areaType ? areaType : undefined
      }
      getAction(this.url.list, paramsWeek).then(res => {
        if (areaType == '0') {
          this.innerWeekList = res.result
          this.innerWeekChartList = res.result
          // 画报表
          // this.initChart(this.$refs.lineBar1);
          this.initChart(this.$refs.lineBarInner, areaType)
          this.initLineChart(this.$refs.lineChartInner, areaType)
        } else if (areaType == '1') {
          this.outWeekList = res.result
          this.outWeekChartList = res.result
          // 画报表
          this.initChart(this.$refs.lineBarOut, areaType)
          this.initLineChart(this.$refs.lineChartOut, areaType)
        }
      })

      const paramsClassWeek = {
        statisticalScope: 'class',
        timeScope: 'week',
        areaType: areaType ? areaType : undefined
      }
      getAction(this.url.list, paramsClassWeek).then(res => {
        if (areaType == '0') {
          this.innerClassWeekList = res.result
        } else if (areaType == '1') {
          this.outClassWeekList = res.result
        }
      })
    },
    viewDataOut(i, type) {
      let key = 'in'
      if (type == '1') {
        key = 'out'
        this.outIndex1 = i
        this.selectOutClass1 = this.outList[i].className
      } else {
        key = 'outTime'
        this.outIndex2 = i
        this.selectOutClass2 = this.outList[i].className
      }
      const classId = this.outList[i].classId
      if (classId) {
        this.outWeekChartList = this.outClassWeekList.filter(item => {
          return item.classId == classId
        })
        this.setColumns(key, classId)
        this.initTable(classId, '1', type)
      } else {
        this.setColumns(key, '')
        this.outWeekChartList = this.outWeekList
        if (type == '1') {
          this.outTablelist1 = []
          this.outTablelist1 = this.outList.filter(item => {
            return item.className != '全园'
          })
        } else {
          this.outTablelist2 = []
          this.outTablelist2 = this.outList.filter(item => {
            return item.className != '全园'
          })
        }
      }
      if (type == '1') {
        this.initChart(this.$refs.lineBarOut, '1')
      } else {
        this.initLineChart(this.$refs.lineChartOut, '1')
      }
    },
    viewDataIn(i, type) {
      let key = 'in'
      if (type == '1') {
        key = 'in'
        this.innerIndex1 = i
        this.selectInnerClass1 = this.innerList[i].className
      } else {
        key = 'inTime'
        this.innerIndex2 = i
        this.selectInnerClass2 = this.innerList[i].className
      }
      const classId = this.innerList[i].classId
      if (classId) {
        this.innerWeekChartList = this.innerClassWeekList.filter(item => {
          return item.classId == classId
        })
        this.setColumns(key, classId)
        this.initTable(classId, '0', type)
      } else {
        this.setColumns(key, '')
        this.innerWeekChartList = this.innerWeekList
        if (type == '1') {
          this.innerTablelist1 = []
          this.innerTablelist1 = this.innerList.filter(item => {
            return item.className != '全园'
          })
        } else {
          this.innerTablelist2 = []
          this.innerTablelist2 = this.innerList.filter(item => {
            return item.className != '全园'
          })
        }
      }

      if (type == '1') {
        this.initChart(this.$refs.lineBarInner, '0')
      } else {
        this.initLineChart(this.$refs.lineChartInner, '0')
      }
    },
    initTable(classId, areaType, type) {
      console.log(classId);
      // 查询运动数据
      const currentDate = this.$skCommon.getDate(0)
      const nextDate = this.$skCommon.getDate(0)
      const paramsStudent = {
        statisticalScope: 'student',
        startDate: currentDate,
        endDate: nextDate,
        classId: classId,
        areaType: areaType ? areaType : undefined
      }
      getAction(this.url.list, paramsStudent).then(res => {
        if (areaType == '0') {
          if (type == '1') {
            this.innerTablelist1 = []
            this.innerTablelist1 = res.result
          } else {
            this.innerTablelist2 = []
            this.innerTablelist2 = res.result
          }
        } else {
          if (type == '1') {
            this.outTablelist1 = []
            this.outTablelist1 = res.result
          } else {
            this.outTablelist2 = []
            this.outTablelist2 = res.result
          }
        }
      })
    },
    initLineChart(el, areaType) {
      var myChartSports
      if (this.$echarts.getInstanceByDom(el)) {
        myChartSports = this.$echarts.getInstanceByDom(el)
      } else {
        myChartSports = this.$echarts.init(el)
      }

      var categorySports = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
      // var xSeriesData = [820, 932, 901, 934, 1290, 1330, 1320];
      var xSeriesData = [0, 0, 0, 0, 0, 0, 0]
      var legendTitle = ['户外时长']
      if (areaType == '0') {
        legendTitle = ['室内时长']
        this.innerWeekChartList.forEach(el => {
          if (el.weekDay == 0) {
            xSeriesData[6] = el.totalDuration
          } else {
            xSeriesData[el.weekDay - 1] = el.totalDuration
          }
        })
      } else if (areaType == '1') {
        legendTitle = ['户外时长']
        this.outWeekChartList.forEach(el => {
          if (el.weekDay == 0) {
            xSeriesData[6] = el.totalDuration
          } else {
            xSeriesData[el.weekDay - 1] = el.totalDuration
          }
        })
      }
      var optionChart = {
        tooltip: {
          borderColor: 'transparent',
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.5)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          },
          textStyle: {
            align: 'left',
            color: '#fff',
            fontSize: '12'
          }
        },
        legend: {
          data: legendTitle,
          textStyle: {
            color: '#ccc'
          }
        },
        xAxis: {
          type: 'category',
          data: categorySports
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: legendTitle[0],
            data: xSeriesData,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#0BA6E3'
              }
            },
            smooth: true
          }
        ]
      }

      myChartSports.setOption(optionChart)
      window.addEventListener('resize', () => {
        myChartSports.resize()
      })
    },
    initChart(el, areaType) {
      var myChartSports
      if (this.$echarts.getInstanceByDom(el)) {
        myChartSports = this.$echarts.getInstanceByDom(el)
      } else {
        myChartSports = this.$echarts.init(el)
      }
      const optionChart = this.getOptions(areaType)
      myChartSports.setOption(optionChart)
      window.addEventListener('resize', () => {
        myChartSports.resize()
      })
    },
    getOptions(areaType) {
      var categorySports = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
      var barDataSports = [0, 0, 0, 0, 0, 0, 0]
      var lineDataSports = [0, 0, 0, 0, 0, 0, 0]
      if (areaType == '0') {
        this.innerWeekChartList.forEach(el => {
          if (el.weekDay == 0) {
            barDataSports[6] = el.totalStepNumber
          } else {
            barDataSports[el.weekDay - 1] = el.totalStepNumber
          }
        })
        this.innerWeekChartList.forEach(el => {
          if (el.weekDay == 0) {
            lineDataSports[6] = el.totalAmount
          } else {
            lineDataSports[el.weekDay - 1] = el.totalAmount
          }
        })
      } else if (areaType == '1') {
        this.outWeekChartList.forEach(el => {
          if (el.weekDay == 0) {
            barDataSports[6] = el.totalStepNumber
          } else {
            barDataSports[el.weekDay - 1] = el.totalStepNumber
          }
        })
        this.outWeekChartList.forEach(el => {
          if (el.weekDay == 0) {
            lineDataSports[6] = el.totalAmount
          } else {
            lineDataSports[el.weekDay - 1] = el.totalAmount
          }
        })
      }

      // option
      let optionSports = {
        backgroundColor: '#fff',
        tooltip: {
          borderColor: 'transparent',
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.5)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          },
          textStyle: {
            align: 'left',
            color: '#fff',
            fontSize: '12'
          }
        },
        legend: {
          data: ['运动量', '步数'],
          textStyle: {
            color: '#ccc'
          }
        },
        grid: {
          left: '14%',
          top: '10%',
          right: '13%',
          bottom: '10%'
        },
        xAxis: {
          data: categorySports,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        yAxis: [
          {
            name: '运动量',
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
          {
            name: '步数',
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          }
        ],
        dataZoom: [
          {
            type: 'slider',
            realtime: true,
            start: 0,
            end: categorySports.length >= 15 ? 40 : 100, // 初始展示40%
            height: 4,
            fillerColor: 'rgba(17, 100, 210, 0.42)', // 滚动条颜色
            borderColor: 'rgba(17, 100, 210, 0.12)',
            handleSize: 0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top: '96%'

            // zoomLock:true, // 是否只平移不缩放
            // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
            // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
          }
          // {
          //   type: "inside",  // 支持内部鼠标滚动平移
          //   start: 0,
          //   end: 40,
          //   zoomOnMouseWheel: false,  // 关闭滚轮缩放
          //   moveOnMouseWheel: true, // 开启滚轮平移
          //   moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
          // }
        ],
        series: [
          {
            name: '运动量',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#0BA6E3'
              }
            },
            data: lineDataSports
          },
          {
            name: '步数',
            type: 'bar',
            barWidth: 10,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                // barBorderRadius: 5,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#0CDF8A'
                  },
                  {
                    offset: 1,
                    color: '#3EACE5'
                  }
                ])
              }
            },
            data: barDataSports
          }
        ]
      }

      return optionSports
    },
    handleCount(dateType, areaType) {
      let data = {
        show: false,
        outCountShow: true,
        outTimeShow: false
      }
      this.$emit('cardData', data, dateType, areaType)
    },
    handleTime(dateType, areaType) {
      let data = {
        show: false,
        outCountShow: false,
        outTimeShow: true
      }
      this.$emit('cardData', data, dateType, areaType)
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
@import '~@assets/less/skReport.less';

/deep/ .ant-table-wrapper {
  height: 403px;
}

/deep/ .ant-card-head-title.center {
  text-align: center;
}

/deep/ .ant-card-head-title.circle {
  border-radius: 50px;
  padding: 2px 0;
  cursor: pointer;
}

/deep/ .ant-card-head-title .bg {
  background-color: #cfdfef;
  border-radius: 5px;
  padding: 5px 10px;
}

/deep/ .ant-card-extra a {
  background-color: @primary-color;
  border-radius: 5px;
  padding: 5px 10px;
  color: #ffffff;
}

/deep/ .scroll-board {
  .header {
    height: 35px;
  }
  .ceil {
    color: #333;
  }
  .ceil:first-child {
    color: #fff;
  }
}

.data-content {
  .title,
  .measure {
    padding: 5px 10px;
  }

  .right {
    text-align: right;
  }
}
</style>
